'use client';

import { IConfigQq } from '@/interfaces';

export default function QueryConfigQq({ details }: { details: IConfigQq }) {
  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-info-square me-2"></i>
            QQ 配置
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <table className="table table-hover align-middle table-striped">
                <thead>
                  <tr className="text-nowrap">
                    <th scope="col" className="fw-normal">
                      ID
                    </th>
                    <th scope="col" className="fw-normal">
                      qq
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {[...Object.keys(details), 'secret']
                    .filter((item) => !['id'].includes(item))
                    .map((item) => {
                      return (
                        <tr key={item} className="text-nowrap">
                          <td>
                            {item === 'enable' && '是否启用'}

                            {item === 'responseType' && '响应类型'}

                            {item === 'clientId' && '应用 AppId'}

                            {item === 'secret' && '应用 AppKey'}

                            {item === 'redirectUri' && '回调地址'}

                            {item === 'state' && '状态值'}

                            {item === 'scope' && '授权列表'}

                            {item === 'display' && '展示样式'}

                            {item === 'grantType' && '授权类型'}
                          </td>
                          <td>
                            {item === 'enable' && details[item] + ''}

                            {item === 'responseType' && details[item]}

                            {item === 'clientId' && details[item]}

                            {item === 'secret' && '*********'}

                            {item === 'redirectUri' && details[item]}

                            {item === 'state' && details[item]}

                            {item === 'scope' && details[item]}

                            {item === 'display' && details[item]}

                            {item === 'grantType' && details[item]}
                          </td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            </div>

            {Object.keys(details).length === 0 && (
              <div className="text-center text-muted">暂无配置</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
